/*�����б�1*/
.gridlist1{ overflow:hidden; -webkit-perspective:1300px; -o-perspective:1300px; -ms-perspective:1300px; perspective:1300px; -webkit-transform-style:preserve-3d;
-o-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; }
.gridlist1 li{     
    float: left;
    width: 20%;
    margin: 0 6.5%;
    zoom: 1;
    text-align: center;
 }
.gridlist1 li img{ width:100%; vertical-align:middle;  }
.gridlist1 li a{ white-space:nowrap; line-height:28px; display:block; }
.gridlist1 li .InfoPicture{ position:relative; }
.gridlist1 li .InfoPicture:hover img{

}
.gridlist1 li .info_wrap{ 
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;

    position: absolute
}
.gridlist1 li .colorBox:hover .info_wrap {
    opacity: 0.8;
    animation: cardinfoshow 1s !important;
    background: rgb(0, 142, 227);
}
.gridlist1 li .info_wrap p{ 
    font-size:26px;
    line-height:26px; 
    color:#fff; 
    text-shadow:2px 2px 14px #000; 
    margin:75px 0 0; 
    white-space:nowrap; 
    text-overflow:ellipsis;
    overflow:hidden; 
    padding:0 5px; 
    transition:all 0.5s ease; 
    -webkit-transition:all 0.5s ease; 
    -moz-transition:all 0.5s ease; 
}
.gridlist1 li .info_wrap .ViewMore{ color:#fff; opacity:0; transition:0.4s ease; -moz-transition:0.4s ease; -webkit-transition:0.4s ease; }
.gridlist1 li:hover{ background:url(../images/footer_bj.png) repeat; }
.gridlist1 li:hover img{ opacity:0.6; }
.gridlist1 li:hover .info_wrap p{ margin:55px 0 20px; }
.gridlist1 li:hover .info_wrap .ViewMore{ opacity:1; }
@keyframes cardinfoshow {
    0% {height: 0%;},
    100% {height:100%}
  }
.gridlist1 li .producttitle{
    font-size: 18px;
    font-weight: 600;
    margin: 15px auto;
}